<template>
	<!-- 背景图片 -->
  <view class="container">
	  <!-- logo -->
    <view class="logo">
		<!-- <image src="@/static/编组 2.png" class="img1"></image> -->
		<view style="width: 100%;height: 90%;">
			
		</view>
		<view style="width: 100%;height: 11%;border-top-left-radius: 40px;border-top-right-radius: 40px;background-color: rgba(255, 255, 255);">
			
		</view>
    </view>
	<!-- 登录框 -->
	<view class="login">
		<view style="width: 90%;height: 8%;margin: 0 auto;">
			<span style="font-size: 20px;font-weight: 600;">入门必练 腹肌激活</span>
		</view>
		<view style="width: 90%;height: 7%;margin: 0 auto;border-bottom: 1px solid rgba(227, 227, 227, 1);">
			<span style="font-size: 18px;font-weight: 600;">22 </span>
			<span style="font-size: 14px;color: rgba(153, 153, 153, 1);"> 分钟</span>
			<span style="font-size: 18px;font-weight: 600;padding-left: 27%;">K1 </span>
			<span style="font-size: 14px;color: rgba(153, 153, 153, 1);"> 难度</span>
			<span style="font-size: 18px;font-weight: 600;padding-left: 30%;">225 </span>
			<span style="font-size: 14px;color: rgba(153, 153, 153, 1);"> 千卡</span>
		</view>
		<view style="width: 100%;height: 3%;"></view>
		<view style="width: 90%;height: 25%;margin: 0 auto;border-bottom: 1px solid rgba(227, 227, 227, 1);">
			<p style="font-size: 18px;font-weight: 600;">训练说明</p>
			<span style="font-size: 14px;color: rgba(153, 153, 153, 1);font-weight: 400;">
				专门为大体重的人群而设计，选取低冲击的大肌群动作结合，兼顾燃脂效果和运动的安全性。门为大体重的人群而设计，选取低冲击的大肌群动作结合，兼顾燃脂效果和运动的安全性。
				</span>
		</view>
		<view style="width: 100%;height: 3%;"></view>
		<view style="width: 90%;height: 8%;margin: 0 auto;border-bottom: 1px solid rgba(227, 227, 227, 1);">
			<span style="font-size: 18px;font-weight: 600;">训练器材</span>
			<span style="font-size: 18px;color: rgba(153, 153, 153, 1);float: right;">小重量哑铃</span>
		</view>
		<view style="width: 100%;height: 3%;"></view>
		<view style="width: 90%;height: 8%;margin: 0 auto;">
			<span style="font-size: 18px;font-weight: 600;">共19个动作</span>
		</view>
		<view style="width: 90%;height: 26%;margin: 0 auto;">
			<view style="width: 37%;height: 100%;float: left;">
				<image src="@/static/编组 15备份 3.png" class="img1" mode=""></image>
			</view>
			<view style="width: 50%;height: 100%;float: left;">
				<view style="width: 100%;height: 30%;"></view>
				<p style="font-size: 18px;font-weight: 600;padding-left: 7%;">肱二头肌激活</p>
				<view style="width: 100%;height: 5%;"></view>
				<p style="font-size: 18px;font-weight: 400;padding-left: 7%;color: rgba(153, 153, 153, 1);">25秒</p>
			</view>
			<view style="width: 13%;height: 100%;float: left;">
				<view style="width: 100%;height: 35%;"></view>
				<view style="width: 4vh;height: 4vh;border-radius: 50%;background-color: rgba(229,229,229);float: right;">
					<view style="width: 100%;height: 25%;"></view>
					<view style="width: 50%;height: 50%;padding-left: 30%;">
						<image src="@/static/三角形.png" class="img1" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		}
		,
		methods: {
			
		}
	}
</script>

<style>
	/* 设置背景图片 */
	.container {
	  /* display: flex; */
	  justify-content: center;
	  align-items: center;
	  height: 100vh;
	  /* background: blue; */
	  /* background-image: url("https://img.js.design/assets/img/625aea28bd06c1a5e27ed094.png"); */
	  background-size: cover;
	}
	
	.logo {
	  width: 100vw;
	  height: 34vh;
	  background-image: url("http://101.43.223.224:8765/image/getImageById?id=5943");
	  background-size: 100%;
	  /* background-color: red; */
	}
	.login {
	  width: 100vw;
	  height: 66vh;
	  background-color: rgba(255, 255, 255);
	}
	.img1{
		width: 100%;
		height: 100%;
	}
	.input1{
		width: 100%;
		height: 100%;
	}
	.input1::placeholder {
	    font-size: 24px; /* 设置预设文本的字体大小 */
	  }
</style>